{% extends "map/new_base.html" %}

{% comment %}

  Add point page
  ---------------
  
  Allows anonymous and logged in users to add to the map.

{% endcomment %}

{% block javascript %}
  <script src="http://www.google.com/jsapi"></script>
  <xlink rel="stylesheet"  href="/assets/style/detailedit_style.css" type="text/css" />  

  <style type="text/css" rel="stylesheet">
    div.ui-datepicker  { font-size:11px; z-index: 3;}
    .helptext {font-size: 0.7em;}
    .maperror {border: 3px solid red;} 
    input { display: inline; margin: 2px;
          }
  </style>

<script type="text/javascript">
    google.load("jquery", "1");
    google.load("jqueryui", "1");  
</script>
<link rel="stylesheet"  href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/humanity/jquery-ui.css"  type="text/css" />

<script src="http://maps.google.com/maps?file=api&amp;v=2.147&amp;key=ABQIAAAAhcP5rdJ8gtI2Tvrvo88B3BR_tirkabJaindNc0FoauOGCOWtrBTLuwigpG4UD6tSDw3AxxYNXLmcVg" type="text/javascript"> </script>
<script type="text/javascript">

   mapper = {
  load: function() {
    if (GBrowserIsCompatible()) {
      var default_lat = 52.1300;
      var default_lng = -0.2190;
      var in_lat = document.getElementById("id_marker_lat").value;
      var in_lng = document.getElementById("id_marker_lng").value;
      
      mapper.map = new GMap2(document.getElementById("map"));
      mapper.map.setCenter(new GLatLng(default_lat, default_lng), 15); // should read this out of the form if we can, cos it might be returned if the form is in valid
      mapper.map.setMapType(G_NORMAL_MAP);
      var mapControl = new GMapTypeControl();
      mapper.map.addControl(mapControl);
      mapper.map.addControl(new GLargeMapControl());
      //mapper.map.enableScrollWheelZoom();
      if (in_lat != '' && in_lng != '') {
        preset_marker = true;
        default_lat = document.getElementById("id_marker_lat").value;
        default_lng = document.getElementById("id_marker_lng").value;
      };
      var marker = new GMarker(new GLatLng(default_lat, default_lng),
        {draggable: true, bouncy: true, icon: G_DEFAULT_ICON, title: "New Marker"});
      
      GEvent.addListener(mapper.map, "click", function(overlay, latlng) {
        if (!latlng) return;
        marker.setLatLng(latlng);
        document.getElementById("id_marker_lat").value=marker.getLatLng().lat();
        document.getElementById("id_marker_lng").value=marker.getLatLng().lng();
        mapper.map.panTo(latlng);
      });
         

      
      GEvent.addListener(marker, "dragend", function() {
        //mapper.map.panTo(this.getLatLng());
        document.getElementById("id_marker_lat").value=this.getLatLng().lat();
        document.getElementById("id_marker_lng").value=this.getLatLng().lng();
        mapper.unlockInputs();
      });
      
  mapper.map.addOverlay(marker);
  mapper.map.panTo(marker.getLatLng());
  mapper.lockInputs();
  }
 },

 toggleScrollyZoom: function(isChecked) {
   if (isChecked) {mapper.map.enableScrollWheelZoom()}
   else {mapper.map.disableScrollWheelZoom()}; 
 },
 
 unlockInputs: function() {
 var formElements = $('#mainaddpoint :input');
 $.each(formElements,function(){
   this.disabled = false;
   });
 $('#moveMarkerFirst').hide();
 },
 
 lockInputs: function() {
 var formElements = $('#mainaddpoint :input');
 $.each(formElements, function(){
   this.disabled = true;
 });
 }
}
</script>


<script type="text/javascript">
    $(document).ready(function() {
		$("#id_date_of_event").datepicker({ dateFormat: 'dd/mm/yy' });
		});
</script>
{% endblock %}
{% block title %}
  Potton Online  |  Add a marker to the map
{% endblock %}

{% block bodytag %}
  onload="mapper.load()" onunload="GUnload()"
{% endblock %}



{% block page_middle %}
{{ form.errors}}
 {% if not form.errors %}
  {% if user.is_authenticated %}
    <h4>Welcome {{ user.username|capfirst }}.  Thanks for adding to Potton Online</h4>
  {% else %}
    <h3>Thanks for adding to Potton Online.<br />Your entry will be submitted and will need to be approved before it appears on the main map.</h3><br />
    If you register for an account you can edit this marker later on, as well as any other markers you have added to the map.  You will also be able 
    to add more information and pictures to your marker, allow people to comment on them and leave a rating.  You'll also get you own 
    @pottononline.com email address.  All for free!  Why not sign up today?
  {% endif %}
  <h1>Add a new <u>marker</u> to the map.</h1>
  {% endif %}
  Click on the map or drag the marker in to postion.

   <div id="map" style="width: 100%; height: 500px;" {% if form.marker_lat.errors %}class="maperror"{% endif %}> </div>
   
   <div id="sidebar" style="padding: 10px; display: none;" >
   Enable ScrollWheel Zoom   <input type="checkbox" id="scrollyzoom" onclick="mapper.toggleScrollyZoom(this.checked)" style="display: inline;"  />
   </div>
   
   <div id="mainaddpoint" >
   <div id="moveMarkerFirst"><ul><h2>First you need to move the red marker on the map to the correct location by clicking and dragging</h2></ul><br/></div>
    {% if form.errors %}<p class="inerror">There is a problem with the information you have provided</p>{% endif %}
     <form action="/addpoint" method="POST">
     <fieldset><legend>Details:</legend>
     
     <div {% if form.editors_name.errors %} class="inerror" {% endif %}>
       <label for="id_editors_name">{{form.editors_name.label}}</label>
       <span class="pinput">{{form.editors_name}}</span>
       <span class="helptext">{{form.editors_name.help_text}}</span>
     </div>
      
     <div {% if form.editors_email.errors %} class="inerror" {% endif %}>
       <label for="id_editors_email">{{form.editors_email.label}}</label>
       {{form.editors_email}}
       <span class="helptext">{{form.editors_email.help_text}}</span>
     </div>
     
     <div {% if form.marker_name.errors %} class="inerror" {% endif %}>
       <label for="id_marker_name">{{form.marker_name.label}}</label>
       {{form.marker_name}}
       <span class="helptext" >{{form.marker_name.help_text}}</span>
     </div>
     
     <div {% if form.marker_type.errors %} class="inerror" {% endif %}>
       <label for="id_marker_type">{{form.marker_type.label}}</label>
       {{form.marker_type}}
       <span class="helptext" >{{form.marker_type.help_text}}</span>
     </div>
     
     <div {% if form.marker_descr.errors %} class="inerror" {% endif %}>
       <label for="id_marker_descr">{{form.marker_descr.label}}</label>
       {{form.marker_descr}}
       <span class="helptext" >{{form.marker_descr.help_text}}</span>
     </div>
     
     <div {% if form.date_of_event.errors %} class="inerror" {% endif %}>
       <label for="id_date_of_event">{{form.date_of_event.label}}</label>
       <input type="text" id="id_date_of_event" name="date_of_event" /></label>
       <span class="helptext" >{{form.date_of_event.help_text}}</span>
     </div>
     
     <div style="display: none;">{{form.marker_lat}}{{form.marker_lng}}</div>

     <input type="submit" value="Submit" class="submit_button"/>
    </fieldset> 
   </form>
</div>
<hr />
    
{% endblock %}

{% block page_left %}
  {% include 'map/default_pageleft.html' %}
{% endblock %}

{% block page_right %}
  {% include 'map/default_pageright.html' %}
{% endblock %}